<template>
<div>
  <div style="margin: 10px 0">
    <el-input style="width: 200px" placeholder="请输入用户" suffix-icon="el-icon-search" v-model="appid"></el-input>
    <el-input style="width: 200px" placeholder="请输入取单号" suffix-icon="el-icon-position" class="ml-5"
              v-model="orderNum"></el-input>
    <el-input style="width: 200px" placeholder="请输入订单号" suffix-icon="el-icon-position" class="ml-5"
              v-model="oddNum"></el-input>


    <el-button class="ml-5" type="primary" @click="getList">搜索</el-button>
    <el-button type="warning" @click="reset">重置</el-button>
    <el-button type="primary" @click="exp" class="ml-5">导出 <i class="el-icon-top"></i></el-button>
  </div>


  <el-table
      border
      :data="ordersList"
      @selection-change=""
  >
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="用户" align="center" prop="appid" />
    <el-table-column label="取单号" align="center" prop="orderNum" />
    <el-table-column label="订单编号" align="center" prop="oddNum" />
    <el-table-column label="已消费" align="center" prop="status">
      <!-- scope 就是后端传来的ordersList -->
      <template slot-scope="scope">
        <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @click.native="switchStatus(scope.row, $event)"
        >
          <!-- $event 开关变化后的值 scope.row.id后端传来的order_id -->
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column label="总价" align="center" prop="priceAll" />
    <el-table-column prop="shopName" align="center" label="所属店铺" />
    <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
    >
      <template slot-scope="scope">
        <el-button
            size="mini"
            type="text"
            icon="el-icon-s-order"
            @click="seeOrderDetail(scope.row)"
        >订单详情</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!-- 显示订单详情 -->
  <el-dialog
      :title="title"
      :visible.sync="openDetail"
      width="60%"
      append-to-body
      style="height: 700px"
  >
    <el-table :data="detailInfo" border style="width: 100%">
      <el-table-column prop="id" align="center" label="菜品id" />
      <el-table-column prop="dishName" align="center" label="菜品名字" />
      <!-- <el-table-column prop="name" label="菜品图片" width="180" /> -->
      <el-table-column prop="dishCount" align="center" label="菜品数量" />
      <el-table-column
          prop="introduce"
          align="center"
          label="菜品描述"
          width="400"
      />
      <el-table-column prop="type" align="center" label="菜品类型" />
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="cancelDetail">确 定</el-button>
    </div>
  </el-dialog>

  <div style="padding: 10px 0">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>

</div>
</template>

<script>
export default {
  name: "HistoryOrder",
  data(){
    return{
      ordersList:[],
      multipleSelection: [],
      total: 0,
      currentPage: 1,
      pageSize: 5,
      appid:'',
      orderNum:'',
      oddNum:'',
      detailInfo:[],
      openDetail: false,
      title:'',
      userId: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).id : ""
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList(){
        this.request.get("/history/orderList",{
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            appid:this.appid,
            orderNum:this.orderNum,
            oddNum:this.oddNum,
            userId:this.userId
          }
        }).then(res=>{
          console.log(res)
          this.currentPage = res.data.current
          this.pageSize = res.data.size
          this.total = res.data.total
          this.ordersList = res.data.records
        })
    },
    switchStatus(row, event){
      this.request.put("/history/updateStatus",row).then((res) => {
        if (res){
          this.$message.success("修改成功")
          this.getList()
        }
      })
    },
    seeOrderDetail(row){
      this.detailInfo = row.orderDishVo;
      this.openDetail = true;
      this.title = "订单详情";
    },
    cancelDetail(){
      this.openDetail = false;
    },
    handleSizeChange(val) {
      //每页多少条
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      //当前第几页
      this.currentPage = val
      this.getList()

    },
    reset() {
      this.appid = '',
      this.orderNum = "",
      this.oddNum = ""
    },
    exp() {
      window.open(`http://localhost:9090/hbgc/history/export`)
    },
  }
}
</script>

<style scoped>

</style>